<!-- 用户编辑弹窗 -->
<template>
  <el-dialog
    width="750px"
    :visible="visible"
    :lock-scroll="false"
    :destroy-on-close="true"
    custom-class="ele-dialog-form"
    :title=" (isUpdate ? '修改用户信息' : '新增老师账户')"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row :gutter="15">
        <el-col :sm="12">
          <el-form-item label="账户名称:" prop="username">
            <el-input
              clearable
              :disabled="isUpdate"
              :maxlength="20"
              v-model="form.username"
              placeholder="请输入老师名称"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :sm="12"> -->
          <!-- <el-form-item label="绑定设备id:" prop="imei">
            <el-input
              clearable
              :maxlength="20"
              v-model="form.imei"
              placeholder="请输入绑定设备id"
            />
          </el-form-item> -->
        <!-- </el-col> -->
        <!-- <el-col :sm="12">
          <el-form-item label="角色:" prop="role_id">
           <el-select
              style="width: 100%"
              :disabled="isUpdate"
              clearable
              v-model="form.role_id"
              placeholder="请选择角色"
            >
              <el-option
                :value="item.id"
                :label="item.name"
                v-for="(item, index) in roleList"
                :key="index"
              />
            </el-select> 
          </el-form-item>
        </el-col> -->
        <el-col :sm="12">
          <el-form-item label="姓名:" prop="realname">
            <el-input
              clearable
              :maxlength="20"
              v-model="form.realname"
              placeholder="请输入姓名"
            />
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="联系电话:" prop="mobile">
            <el-input
              :min="0"
              v-model="form.mobile"
              placeholder="请输入联系电话"
            />
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="性别:" prop="sex">
            <el-select
              style="width: 100%"
              clearable
              v-model="form.sex"
              placeholder="请选择性别"
            >
              <el-option
                :value="index"
                :label="item"
                v-for="(item, index) in ['女', '男', '保密']"
                :key="index"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="头像：" prop="avatar">
            <uploadImage :limit="1" v-model="form.avatar"></uploadImage>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import uploadImage from "@/components/uploadImage";

export default {
  components: { uploadImage },
  name: "UserEdit",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    name: String,
    id: Number,
  },
  data() {
    var username_fn = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("账号不能为空"));
      }
      if (this.isUpdate) {
        return callback();
      }
      this.$http
        .post("/teacher/check", { username: value })
        .then((res) => {
          if (res.data.code === 0) {
            console.log(res.data.data);
            if(res.data.data.id){
              return callback(new Error('该账号已存在'));
            }else{
            callback();
            }
          } else {
            return callback(new Error(res.data.message));
          }
        })
        .catch((e) => {
          return callback(new Error(e.message));
        });
    };
    return {
      form: Object.assign({ status: 1 }, this.data),
      // 表单验证规则
      rules: {
        username: [{ required: true, validator: username_fn, trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        // realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        sex: [
          { required: true, message: "请选择性别", trigger: "blur,change" },
        ],
        mobile: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        avatar: [
          { required: true, message: "请输入头像", trigger: "blur,change" },
        ],
        role_id: [
          { required: true, message: "请选择角色", trigger: "blur,change" },
        ],
        imei:[
          { required: true, message: "请输入设备id", trigger: "blur,change" },
        ],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      roleList: [],

    };
  },
  watch: {
    // data(vel) {
    //   if (vel) {
    //     let obj = JSON.parse(JSON.stringify(vel));
    //     // this.form = Object.assign({}, this.data, {
    //     //   // role_ids: this.data.roles.map(d => d.id)
    //     // });
    //     // 取值赋予城市组件
    //     console.log(obj)
    //     if (obj.id) {
    //       this.isUpdate = true;
    //     }
    //     this.form = {
    //       id: obj.id,
    //       avatar: obj.avatar || "",
    //       realname: obj.realname || "",
    //       username:obj.username|| "",
    //       role_id: obj.role_id || "",
    //       mobile: obj.mobile || "",
    //       sex: obj.sex || "",
    //     };
    //   } else {
    //     this.form = {};
    //     this.isUpdate = false
    //   }
    // },
    data() {
      if (this.data) {
        this.form = this.data;
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    },
  },
  mounted() {
    this.queryRoles();  // 查询角色列表
  },
  methods: {
    changeInp() {
      this.$forceUpdate();
    },
    /* 保存编辑 */
    save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          // 城市数据处理
          this.$http
            .post("/student_parent/edit", { ...this.form})
            .then((res) => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message({ type: "success", message: res.data.msg });
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit("done");
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },
     /* 查询角色列表 */
     queryRoles() {
      this.$http.get('/role/getRoleList').then(res => {
        if (res.data.code === 0) {
          this.roleList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
  },
};
</script>

<style scoped>
</style>
